import React, { useState, useEffect, useRef } from 'react'
import { Outlet, useNavigate } from 'react-router-dom'
import { Input, Select, Button, Tabs } from 'antd';
import type { TabsProps } from 'antd';
import { useDispatch, useSelector } from 'react-redux';
import { getGoodsType } from '../../../request/api'

import Table1 from './Table1';
import Table2 from './Table2';
import './Administration.css'
import { setGoodsLook, setIsGoods } from '../../../store/module/store';



export default function Administration() {
  const dispatch = useDispatch()
  const navigate=useNavigate()

  const [typeList, setTypeList] = useState<any>([])//商品类型列表
  const [name, setName] = useState<string>('')  //商品名称
  const [inventory, setInventory] = useState<string>('') //库存
  const [label, setLabel] = useState<string>('') //标签
  const [statue, setStatue] = useState<string>('') //状态
  //下拉选择事件
  const handleChange_statue = (value: string) => { //状态
    setStatue(value)
  };
  const handleChange_inventory = (value: string) => { //库存
    setInventory(value)
  }
  const handleChange_label = (value: string) => { //标签
    setLabel(value)
  }

  //标签页组件
  const onChange = (key: string) => {
    // console.log(key);
  };
  const items: TabsProps['items'] = [
    {
      key: '1',
      label: '启用',
      children: <Table1 />,
    },
    {
      key: '2',
      label: '禁用',
      children: <Table2 />,
    },
  ];

  useEffect(() => {
    getGoodsTypeList();
  }, [])

  //获取类型
  const getGoodsTypeList = async () => {
    const res = await getGoodsType({});
    setTypeList(res.list)
  }
  //检索  
  const search = () => {
    dispatch(setGoodsLook({ name: name, inventory: inventory, label: label, statue: statue }))
    dispatch(setIsGoods())
  }
  //重置
  const get_group = () => {
    setName('')
    setInventory('')
    setLabel('')
    setStatue('')
    dispatch(setGoodsLook({}))
    dispatch(setIsGoods())

  }

  return (
    <div>
      <div className='all_top'>
        <div className='top'>
          <Input size="large" placeholder="请输入内容" prefix='商品名称：'
            style={{ margin: '0.35rem', width: '5.5rem', borderRadius: '0', fontSize: '0.22rem' }} value={name} onChange={(event) => {
              setName(event.target.value)
            }} />

          <div style={{ margin: '0.35rem', width: '5.5rem', borderRadius: '0', fontSize: '0.22rem' }}>
            <span style={{ marginLeft: '0.13rem' }}>商品标签：</span>
            <Select
              defaultValue="全部"
              style={{ width: '4rem', borderRadius: '0', fontSize: '0.22rem' }}
              onChange={handleChange_statue}
              options={[
                { value: '全部', label: '全部' },
                { value: '预售', label: '预售' },
                { value: '现货', label: '现货' },
              ]}
            />
          </div>
          <div style={{ margin: '0.35rem', width: '5.5rem', borderRadius: '0', fontSize: '0.22rem' }}>
            <span style={{ marginLeft: '0.13rem' }}>商品分类：</span>
            <Select
              defaultValue="全部"
              style={{ width: '4rem', borderRadius: '0', fontSize: '0.22rem' }}
              onChange={handleChange_label}
              options={typeList.map(item => {
                return { value: item._id, label: item.type }
              })}
            />
          </div>
          <div style={{ margin: '0.35rem', width: '5.5rem', borderRadius: '0', fontSize: '0.22rem' }}>
            <span style={{ marginLeft: '0.13rem' }}>库存数量：</span>
            <Select
              defaultValue="全部"
              style={{ width: '4rem', borderRadius: '0', fontSize: '0.22rem' }}
              onChange={handleChange_inventory}
              options={[
                { value: '', label: '全部' },
                { value: '0-0', label: '0' },
                { value: '0- 50', label: '0-50' },
                { value: '50-100', label: '50-100' },
                { value: '100-200', label: '100-200' },
                { value: '200-99999999', label: '200以上' },
              ]}
            />
          </div>
        </div>
        <div className='top2'>
          <Button style={{ borderRadius: '0', marginLeft: '0.3rem', fontSize: '0.25rem', padding: '0.35rem', marginBottom: '0.4rem' }}
            onClick={() => {
              search()
            }}
          >检索</Button>
          <Button style={{ borderRadius: '0', marginLeft: '0.3rem', fontSize: '0.25rem', padding: '0.35rem', marginBottom: '0.4rem' }}
            onClick={() => {
              get_group()
            }}
          >重置</Button>
          <Button color="danger" variant="outlined" style={{ borderRadius: '0', marginLeft: '0.3rem', fontSize: '0.25rem', padding: '0.35rem', marginBottom: '0.4rem' }}
            onClick={() => {
              navigate('/home/Commodity/Add_goods')
            }}
          >新建商品</Button>
        </div>
      </div >
      <div className='box'>
          <Tabs defaultActiveKey="1" items={items} onChange={onChange} />
      </div>
    </div>
  )
}


